<template>
<div id="degree">
  <navigation></navigation>
  <div class="banner">
    <p>AMERICAN</p>
    <p>UNDERGRADUATE</p>
    <p>美国本科
    </p>
    <div></div>
  </div>
  <div class="needs">
    <div class="item">
      <div class="left">
        <p>NO.1标准化成绩要求</p>
        <div></div>
        <p>中国学生赴美留学低龄化趋势日益明显,美国高中普遍需要托福成绩和SSAT成绩，部分顶级高中成绩要求达到很高标准，享誉海内外，并且有着“常春藤摇篮”的美誉。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-2.jpg" /></div>
    </div>
    <div class="item">
      <div><img src="../../assets/images/degree/degree-3.jpg" /></div>
      <div class="left">
        <p>NO.2学术成绩</p>
        <div></div>
        <p>中国学生赴美留学低龄化趋势日益明显,美国高中普遍需要托福成绩和SSAT成绩，部分顶级高中成绩要求达到很高标准，享誉海内外，并且有着“常春藤摇篮”的美誉。</p>
      </div>
    </div>
    <div class="item">
      <div class="left">
        <p>NO.3综合背景</p>
        <div></div>
        <p>美国高中更注重青少年的领袖精英式培养，鼓励学生们专注于自己热爱的专业领域，并有着执着的成功决心，发展出天才少年的枝芽。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-4.jpg" /></div>
    </div>
    <div class="item">
      <div>
        <img src="../../assets/images/degree/degree-5.jpg" />
      </div>
      <div class="left">
        <p>NO.4文书</p>
        <div></div>
        <p>文书是学生向学校展示自我的唯一叙述文字材料，围绕一个主题展开，层次分明，逻辑清晰，展现自我，让招生官了解学生的人生观，价值观，学术目标。</p>
      </div>
    </div>
    <div class="item">
      <div class="left">
        <p>NO.5综合背景</p>
        <div></div>
        <p>推荐信是从第三者的立场来介绍、展示申请人的综合素质以及优秀品质，学校通过第三方的客观描述，结合文书，对学生做出重要的录取综合评估。</p>
      </div>
      <div><img src="../../assets/images/degree/degree-6.jpg" /></div>
    </div>
    <div class="item">
      <div>
        <p class="spe-title">NO.6面试</p>
        <div class="spe-div"></div><img src="../../assets/images/degree/degree-33.jpg" /></div>
      <div class="left spe">
        <p style="fontSize: 0.24rem">作为与招生官直接面对面的申请最后环节，重要性不言而喻。一位文质彬彬，谦谦君子般的学生，会给学校留下良好的印象，大大增加录取成功率。但是重视精英教育的美国人，也会破格录取某些领域奇才与怪才，特别是艺术类和理工科类的高中。</p>
      </div>
    </div>
  </div>
  <div class="teacher">
    <p>招生官简介</p>
    <p>ADMISSIONS OFFICER PROFILE</p>
    <div class="item"></div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-25.jpg" />
      <div class="bottom">
        <p>帕梅拉女士</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>帕梅拉女士，是青胜留学美本申请的美方专业顾问，有十余年瓦萨学院和康奈尔大学招生经验，负责校友招生大使计划，组织招生委员会志愿者进行准学生面试和录取工作，同时也承担审核评估申请者的工作。</p>
      </div>
    </div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-26.jpg" />
      <div class="bottom">
        <p>威尔逊先生</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>担任青胜留学美本申请的美方专业顾问。在任名校招生官期间，曾负责南芝加哥和周边地区的招生工作，按照大学的录取标准审查和决定录取人选。对申请流程和各学校录取要求的深入了解，使得威尔逊先生能给出中肯、有效的建议。</p>
      </div>
    </div>
    <div class="teacher-item">
      <img src="../../assets/images/degree/degree-27.jpg" />
      <div class="bottom">
        <p>玛德琳女士</p>
        <p>青胜留学美高申请的美方专业顾问</p>
        <p>担任青胜留学美本、美研申请的美方专业顾问。她对留学申请非常了解，学术造诣也很高，尤其在政治、经济、历史学方面颇有研究。留学申请过程中，会给学生提供专业的指导和建议。</p>
      </div>
    </div>
    <p @click="toPage('/team')" class="more">查看更多</P>
  </div>
  <div class="success-case">
    <p>成功案例</p>
    <p>SUCCESS CASE</p>
    <div class="item"></div>
    <div class="container">
      <div class="case-item">
        <img src="../../assets/images/degree/degree-28.jpg" />
        <p>郭同学</p>
        <p>国内学校：国内普通高中<br> 学术成绩：GPA 3.8/4.0<br> 录取院校：加州大学伯克
          <br>利分校 录取专业：计算机科学
        </p>
      </div>
      <div class="case-item">
        <img src="../../assets/images/degree/degree-29.jpg" />
        <p>王同学</p>
        <p>国内学校：国内普通高中<br> 学术成绩：GPA 3.6/4.0<br> 录取院校：约翰霍普金斯
          <br>大学 录取专业：国际关系
        </p>
      </div>
      <div class="case-item">
        <img src="../../assets/images/degree/degree-30.jpg" />
        <p>周同学</p>
        <p>国内学校：国内普通高中<br> 学术成绩：GPA 3.6/4.0<br> 录取院校：南加利福尼亚
          <br>大学 录取专业：传播学
        </p>
      </div>
      <div class="case-item">
        <img src="../../assets/images/degree/degree-31.jpg" />
        <p>吴同学</p>
        <p>国内学校：国内普通高中<br> 学术成绩：GPA 3.5/4.0<br> 录取院校：哥伦比亚大学
          <br> 录取专业：社会学
        </p>
      </div>
    </div>
    <p @click="toSuccessCase(1)" class="more">查看更多</p>
  </div>
  <div class="reason">
    <p>美国留学八大理由</p>
    <p>EIGHT REASONS TO STUDY IN THE US</p>
    <div class="item"></div>
    <div class="container">
      <div class="reason-item back-1">
        <p>顶级资源</p>
        <div class="reason-border"></div>
        <p>众所周知，美国有着世界一流的教育资源，在最新世界大学排行的Top10里美国就占了五个位置。
        </p>
      </div>
      <div class="reason-item back-2">
        <p>文化适应</p>
        <div class="reason-border"></div>
        <p>美国是一个多元化相互交织交融的国家，在这样的一个国家里可以感受到不同文化带来的差异和新鲜感。
        </p>
      </div>
      <div class="reason-item back-3">
        <p>全球视野</p>
        <div class="reason-border"></div>
        <p>站在世界的金融和政治中心，接受世界一流的教育资源，结交来自各国不同文化背景的朋友，开拓国际视野。
        </p>
      </div>
      <div class="reason-item back-4">
        <p>学历价值</p>
        <div class="reason-border"></div>
        <p>申请材料多，竞争激烈，考试成绩要求高等，使得赴美读大学不仅成为家庭实力的体现，而且更是学生能力的证明。
        </p>
      </div>
      <div class="reason-item back-5">
        <p>就业优势</p>
        <div class="reason-border"></div>
        <p>相比国内，美国毕业生起薪高，技术类人才好就业，STEM专业可以最长申请留美工作3年。
        </p>
      </div>
      <div class="reason-item back-6">
        <p>创业机会</p>
        <div class="reason-border"></div>
        <p>不拼爹，不拼妈，大学注重学生能力的培养。只要你有能力，拉着朋友想扎克伯格一样来次创业吧。
        </p>
      </div>
      <div class="reason-item back-7">
        <p>升学竞争</p>
        <div class="reason-border"></div>
        <p>不再一考定终身，吸收先进的教育理念，真正体验到因材施教，发挥自身优势，每个人都有就读名校的机会。
        </p>
      </div>
      <div class="reason-item back-8">
        <p>人脉资源</p>
        <div class="reason-border"></div>
        <p>就读哥伦比亚大学，你与世界金融中心如此接近；就读斯坦福，你有机会接触到世界上最优秀的高科技人才。
        </p>
      </div>
      <!-- <p class="more">查看更多</p> -->
    </div>
  </div>
  <div class="stra">
    <p>本科申请攻略</p>
    <p>UNDERGRADUATE APPLICATION STRATEGY</p>
    <div class="item"></div>
    <div v-for="item of newsList" @click="showDetail(item.id)" class="info-container">
      <img :src="item.picture" />
      <div>
        <p>{{item.title}}</p>
        <p>{{ item.description}}</p>
        <p>{{item.publish}}</p>
      </div>
    </div>

    <!-- <p class="more">查看更多</p> -->
  </div>
  <div class="order">
    <p>
      美国本科排名
    </p>
    <p>
      US UNDERGRADUATE RANKING
    </p>
    <div class="item"></div>
    <table class="order-table">
      <tr>
        <td class="title" style="width: 0.87rem;">排名</td>
        <td class="title" style="width: 2.86rem;">学校</td>
        <td class="title" style="width: 1.92rem;">地区</td>
        <td class="title" style="width: 1.04rem;"></td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">01</td>
        <td>Princeton University</td>
        <td>Princeton, NJ</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/princeton-university-2627')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">02</td>
        <td>Harvard University</td>
        <td>Cambridge,MA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/harvard-university-2155')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">03</td>
        <td>University of<br> Chicago
        </td>
        <td>Chicago,IL</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/university-of-chicago-1774')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">04</td>
        <td>Yale University</td>
        <td>New Haven,CT</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/yale-university-1426')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">05</td>
        <td>Columbia University</td>
        <td>New York,NY</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/columbia-university-2707')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">06</td>
        <td>Massachusetts<br> Institute of Technology</td>
        <td>Cambridge,MA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/massachusetts-institute-of-technology-2178')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">07</td>
        <td>Stanford University</td>
        <td>Stanford,CA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/stanford-university-1305')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">08</td>
        <td>University of<br> Pennsylvania
        </td>
        <td>Philadelphia,PA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/university-of-pennsylvania-3378')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">09</td>
        <td>Duke University</td>
        <td>Durham,NC</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/duke-university-2920')">查看</td>
      </tr>
      <tr>
        <td style="fontSize: 0.36rem;">10</td>
        <td>California Institute<br> of Technology</td>
        <td>Pasadena,CA</td>
        <td style="fontSize: 0.3rem;" @click="goPage('https://www.usnews.com/best-colleges/california-institute-of-technology-1131')">查看</td>
      </tr>
    </table>
  </div>
  <pageFooter></pageFooter>
</div>
</template>
<script>
import navigation from "@/components/navigation/index";
import pageFooter from "@/components/footer/index";

import {
  NetworkUtil
} from "@/lib/util"

export default {
  components: {
    navigation,
    pageFooter
  },
  data() {
    return {
      newsList: []
    }
  },
  created() {
    NetworkUtil.request({
      url: '/api/service/undergraduate',
      method: 'get'
    }, info => {
      this.newsList = info.list_1.concat(info.list_2, info.list_3)
      for (let item of this.newsList) {
        item.picture = 'https://www.keywinus.com/' + item.picture
      }
      console.log(this.newsList);
    }, err => {
      console.log(err)
    })
  },
  methods: {
    goPage(path) {
      window.location.href = path
    },
    toPage(path) {
      this.$router.push(path)
    },
    toSuccessCase(index) {
      this.$router.push({
        name: 'successCase',
        params: {
          tabIndex: index
        }
      })
    },
    showDetail(id) {
      this.$router.push({
        name: 'serviceDetail',
        params: {
          id: id
        }
      })
    }
  }
}
</script>
<style lang="less" rel="stylesheet/less">
@import "index.less";
</style>
